import React, { useState } from 'react'
import { ExpansionCardList } from '../../../utils/config/index'
import './index.css'

const tableList = []
ExpansionCardList.forEach(item => {
  tableList.push({
    ...item,
    isShow: false
  })
})


function Index() {
  const [list, setList] = useState(tableList);
  const change = (e) => {
    const activeIndex = +e.target.dataset.index;
    if (typeof activeIndex === 'undefined') return;
    list.forEach((item, index) => { item.isShow = activeIndex === index })
    setList([...list])
  }
  return (
    <div className="box" onClick={change}>
      {list.map((item, index) => <CardCompent key={index} name={item.name} imgUrl={item.imgurl} isShow={item.isShow} index={index} ></CardCompent>)}
    </div>
  )
}


function CardCompent({
  name,
  imgUrl,
  isShow,
  index
}) {

  return (
    <div className={isShow ? 'active card' : 'card'}>
      <img className="photo" src={imgUrl} data-index={index} />
      {isShow && <h2 className="test">{name}</h2>}
    </div>
  )
}


export default Index